<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view class="wrap" v-else>
		<image class="showimg" :src="resData.Images" mode="aspectFill"></image>
		<view class="top">
			<view class="topLeft" @click="nav_to(`/pages/user/user_visitor?id=${initUser.UserID}`)">
				<view class="initiatorHeadImg">
					<image :src="initUser.HeadImgUrl" mode="aspectFill"></image>
				</view>
				<view class="nameInfo" v-if="initUser.Name">
					<view class="nameText">
						{{ initUser.Name?$util.entitiesToUtf16(initUser.Name):'' }}
					</view>
					<view class="initText">
						<text class="Birthday">{{resData.Item[0].Birthday?getYearStr(resData.Item[0].Birthday)+'后':''}}</text>
						<text>{{resData.Item[0].UserCity?resData.Item[0].UserCity:''}}</text>
						
					</view>
				</view>
			</view>
			<view class="topRight">
				<view class="groupChatBtn">
					<image :src="ossPath + `/upload/1711352890312520.png`" mode="aspectFill" @click="toGroup" v-if="is_group != -1"></image>
				</view>
				<view class="editBtn" v-if="resData.UserID == user.UserID" @click="edit">
					<image :src="ossPath + `/upload/171135289027848.png`" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="mid">
			<view class="midHead">
				<view class="midcon">
					<view class="midTitle">
						{{ resData.Title?$util.entitiesToUtf16(resData.Title):'' }}
					</view>
				</view>
				<!-- <view class="midSubTitle" v-if="resData.Remark">
					{{ resData.Remark }}
				</view> -->
				<view class="describe">
					<!-- <text v-if="toggle" class="describetext">{{ resData.Remark ? $util.entitiesToUtf16(resData.Remark) : '当前未有简介' }}</text> -->
					<text class="describetext2">{{ resData.Remark ? $util.entitiesToUtf16(resData.Remark) : '当前未有简介' }}</text>
					<!-- <view v-if="resData.Remark && resData.Remark.length > 38" :class="toggle ? 'expand' : 'retract'" @click="onexpand">
						<text class="expandtext">全文</text>
						<image v-if="toggle" class="expandimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png"></image>
						<image v-else class="expandimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711679435607517.png"></image>
					</view> -->
				</view>
				<view class="describetext3" style="width: 100%;" v-if="resData.XHS_ID" @click="lookID()">{{ '也可以通过小红书：'+resData.XHS_ID+'联系我'}}
					<!-- <text style="color: #008dd4;">查看</text> -->
				</view>
			</view>
			<view class="midContent">
				<block v-if="resData.PlaceType == '约组局'">
					<view class="dateTime flx mgt-10">
						<image class="timeimg subIcons" :src="ossPath + `/upload/17150674027971173.png`"></image>
						<view class="timeText subText">
							{{ resData.PeopleNum}}
						</view>
					</view>
				</block>
				<view class="payInfo flx mgt-10">
					<image class="paymentimg subIcons" :src="ossPath + `/upload/171506494857470.png`"></image>
					<view class="payInfoText subText">
						<block v-if="resData.PlaceType == '约陪滑'">
							{{resData.Commission+'元'}}
						</block>
						<block v-if="resData.PlaceType == '约教练'">
							{{resData.Commission+'元/小时'}}
						</block>
						<block v-if="resData.PlaceType == '约组局' || resData.PlaceType == '约拼车'">
							{{ resData.FeeRule }}
						</block>
						
					</view>
				</view>
				<view class="dateTime flx mgt-10" v-if="resData.ServerDate &&resData.ServerTime">
					<image class="timeimg subIcons" :src="ossPath + `/upload/1715064978041194.png`"></image>
					<view class="timeText subText" v-if="resData.ServerDate &&resData.ServerTime">
						{{ (getTime2(resData.ServerDate)?getTime2(resData.ServerDate):'') + ' ' + (getWeek(resData.ServerDate)?getWeek(resData.ServerDate):'') + (resData.ServerTime?resData.ServerTime:'')}}
					</view>
				</view>
				<view class="dateAddr flx mgt-10" v-if="resData.PlaceType != '约拼车'" @click="openMap">
					<image class="addressimg subIcons" :src="ossPath + `/upload/1715066866839518.png`"></image>
					<view class="addrText subText">{{ resData.Place || '未知' }} | 距您 {{ resData.Distance > 100 ? '>100' : resData.Distance }} km</view>
					<image class="rimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image>
				</view>
				<block v-if="resData.PlaceType == '约拼车'">
					<view class="distancebox">
						<view class="startbox" @click="startMap">
							<image class="biaodian" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715065034465227.png" mode="widthFix"></image>
							<view class="startadd">{{resData.Start_Pot?resData.Start_Pot:''}}</view>
							<image class="rarrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image>
						</view>
						<image class="xarrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715065787815119.png" mode="widthFix"></image>
						<view class="startbox" @click="endMap">
							<image class="biaodian" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171506504952953.png" mode="widthFix"></image>
							<view class="startadd">{{resData.End_Pot?resData.End_Pot:''}}</view>
							<image class="rarrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- <image class="showimg" :src="resData.Images" mode="aspectFill"></image> -->
		<!-- <view class="list">
			<view class="tabs wap">
				<view class="listTab" :class="{ tabChecked: currentTab == 2 }" @click="switchTab(2)">报名人员({{ applyNum }})</view>
			</view>
			<view class="listData">
				<block v-if="currentTab == 1">
					<block v-if="confirmList.length > 0">
						<x-scroll :fixed="true" :isNav="true" @onRefresh="onScrollRefresh" :refresh="true">
							<view class="listItem wrap" v-for="(item, index) in confirmList" :key="index" v-if="confirmList.length > 0">
								<view class="leftSide">
									<view class="headImg">
										<image :src="item.HeadImgUrl" mode="aspectFill"></image>
									</view>
									<view class="userName">
										<view class="nameText">
											{{ item.Name }}
											<span :class="['vipType', getVipCss(item)]">{{ item.UserType }}</span>
										</view>

										<view class="sign">这是最好的滑雪</view>
									</view>
								</view>
								<view class="rightSide">
									<view class="online">
										{{ getTime('2024-03-26T14:39:11.22') }}
									</view>
									<view class="operateGroup">
										<block v-if="item.IsInvite != 1">
											<block v-if="item.Status == 2">
												<view class="opreateBtn blackBtn">已签到</view>
											</block>
											<block v-else-if="item.Status == 3">
												<view class="opreateBtn blackBtn">已领奖励</view>
											</block>
										</block>
									</view>
								</view>
							</view>
						</x-scroll>
					</block>
					<block v-else>
						<view class="emptyList">
							<image :src="ossPath + `/upload/17124806786111367.png`" mode=""></image>
							暂无数据
						</view>
					</block>
				</block>
				<block v-else-if="currentTab == 2">
					<block v-if="applyList.length > 0">
						<x-scroll :fixed="true" :isNav="true" @onRefresh="onScrollRefresh" :refresh="true">
							<view class="listItem wrap" v-for="(item, index) in applyList" :key="index">
								<view class="leftSide">
									<view class="headImg">
										<image :src="item.HeadImgUrl" mode=""></image>
									</view>
									<view class="userName">
										<view class="nameText">
											{{ item.Name }}
											<image
												v-if="item.UserType == '体验会员'"
												class="vipiconimg"
												src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643203782247.png"
											></image>

											<image
												class="vipiconimg"
												v-if="item.UserType == '金卡会员'"
												src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643257412478.png"
											></image>

											<image
												class="vipiconimg"
												v-if="item.UserType == '年卡会员'"
												src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"
											></image>

											<image
												class="vipiconimg"
												v-if="item.UserType == '黑金卡会员'"
												src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"
											></image>

											<image
												class="vipiconimg"
												v-if="item.UserType == '黑金年卡会员'"
												src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"
											></image>
										</view>

										<view class="sign">这是最好的滑雪</view>
									</view>
								</view>
								<view class="rightSide">
									<view :class="{ signup: item.Status == 0, identify: item.Status == 1 }">
										<text v-if="item.Status == 0">已报名</text>
										<text v-if="item.Status == 1">成功入选</text>
									</view>
								</view>
							</view>
						</x-scroll>
					</block>
					<block v-else>
						<view class="emptyList">
							<image :src="ossPath + `/upload/17124806786111367.png`" mode=""></image>
							暂无报名
						</view>
					</block>
				</block>
			</view>
		</view> -->
		<view class="bottom">
			<!-- 是发起人 -->
			<block v-if="initUser.UserID == user.UserID">
				<view class="btnGroup">
					<view class="halfBtn organize" @click="reduce_user">管理报名人员</view>
					<view class="halfBtn blackBtn" @click="add_user">邀请好友</view>
				</view>
			</block>
			<block v-else>
				<block v-if="!is_sign">
					<block v-if="IsInvitor">
						<view class="btnGroup">
							<view class="halfBtn whiteBtn" @click="reject_invite">拒绝</view>
							<view class="halfBtn blackBtn" @click="agree_invite">同意</view>
						</view>
					</block>
					<view class="subscribe" v-else-if="resData.Status == 3">
						<view class="shareBtn">
							<!--  #ifdef MP-WEIXIN -->
							<button hover-class="none" open-type="share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->

							<!--  #ifdef APP-PLUS -->
							<button hover-class="none" @click="app_share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->
							<view class="sharetetx">分享</view>
						</view>
						<view  class="fullBtn whiteBtn">已结束</view>
					</view>
					
					<view class="subscribe" v-else>
						<view class="shareBtn">
							<!--  #ifdef MP-WEIXIN -->
							<button hover-class="none" open-type="share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->

							<!--  #ifdef APP-PLUS -->
							<button hover-class="none" @click="app_share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->
							<view class="sharetetx">分享</view>
						</view>
						<view v-if="resData.Status == 1" class="fullBtn whiteBtn">正在进行中</view>
						<view v-else @click="subJoin" class="fullBtn blackBtn">
							立即约Ta
						</view>
					</view>
				</block>
				<block v-else-if="resData.Status <= 2 && resData.Status >= 0">
					<block v-if="IsSuccessed && Success_Msg != '您已退出该球局' && Success_Msg != '您已拒绝该球局' && Success_Msg != '您已退出' && resData.Status != 1">
						<view class="subscribe">
							<view class="shareBtn">
								<!--  #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->

								<!--  #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->
								<view class="sharetetx">分享</view>
							</view>
							<view @click="cancelBall()" class="fullBtn blackBtn">取消预约</view>
						</view>
						<!-- <view @click="cancelBall()" class="fullBtn blackBtn">取消报名</view> -->
					</block>
					<block v-else-if="Success_Msg == '您已退出该球局'">
						<view class="subscribe">
							<view class="shareBtn">
								<!--  #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->

								<!--  #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->
								<view class="sharetetx">分享</view>
							</view>
							<view class="fullBtn whiteBtn">已取消</view>
						</view>
						<!-- <view class="fullBtn whiteBtn">已取消</view> -->
					</block>
					<block v-else-if="Success_Msg == '您已退出'">
						<view class="subscribe">
							<view class="shareBtn">
								<!--  #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->

								<!--  #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->
								<view class="sharetetx">分享</view>
							</view>
							<view class="fullBtn whiteBtn">已取消</view>
						</view>
						<!-- <view class="fullBtn whiteBtn">已取消</view> -->
					</block>
					<block v-else-if="IsSign">
						<view class="subscribe">
							<view class="shareBtn">
								<!--  #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->

								<!--  #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->
								<view class="sharetetx">分享</view>
							</view>
							<view class="fullBtn blackBtn" @click="user_sign">开始签到</view>
						</view>
						<!-- <view class="fullBtn blackBtn" @click="user_sign">开始签到</view> -->
					</block>
					<block v-else-if="resData.Status == 1">
						<view class="shareBtn">
							<!--  #ifdef MP-WEIXIN -->
							<button hover-class="none" open-type="share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->

							<!--  #ifdef APP-PLUS -->
							<button hover-class="none" @click="app_share">
								<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
							</button>
							<!-- #endif -->
							<view class="sharetetx">分享</view>
						</view>
						<view  class="fullBtn whiteBtn">正在进行中</view>
					</block>
					<!-- <block v-else-if="IsSuccessed && Success_Msg != '您已退出该球局' && Success_Msg != '您已拒绝该球局' && Success_Msg != '您已退出'">
						<view class="fullBtn whiteBtn">已报名</view>
					</block> -->
				</block>
				<block v-else-if="resData.Status == 3">
					<view class="subscribe">
						<view class="shareBtn">
								<!--  #ifdef MP-WEIXIN -->
								<button hover-class="none" open-type="share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->

								<!--  #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share">
									<image :src="ossPath + `/upload/17113498953551161.png`" mode="widthFix"></image>
								</button>
								<!-- #endif -->
								<view class="sharetetx">分享</view>
						</view>
						<view class="fullBtn whiteBtn">已结束</view>
					</view>
				</block>
				<view v-if="ismyrefuse" class="fullBtn whiteBtn">已被拒绝</view>
			</block>
		</view>
		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
		<!-- 小红书ID弹窗 -->
		<uni-popup ref="xhspopu" type="center">
			<view class="xhsbox">
				<image  class="xhslogo" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1731404380943728.webp"></image>
				<view class="xhstext">该篇内容来自小红书博主</view>
				<view class="xhstext">请复制ID前往小红书联系</view>
				<view class="xhscent">
					<!-- <view class="xhstitle">小红书ID：</view> -->
					<view class="xhsid">{{resData.XHS_ID?resData.XHS_ID:''}}</view>
					<view class="xhsbtn" @click="idCopy">复制</view>
				</view>
				<view class="xhsclose" @click="onxhsclose">关 闭</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			toggle: true,
			ismyrefuse: false,
			ID: '',
			payPrice: 0,
			cover: '',
			user: {},
			load: false,
			resData: {},
			initUser: {},
			read: false,
			userIDList: [],
			userList: [],
			applyList: [],
			confirmList: [],
			is_sign: false,
			list: [],
			longitude: '',
			latitude: '',
			IsInvitor: false, //是否为邀请用户
			IsSign: false,
			IsSuccessed: false,
			Success_Msg: '',
			groupID: 0,
			groupList: [],
			currentTab: 2,
			my_ball_status: 0,
			confirmNum: 0, //已确认人数
			applyNum: 0, //申请报名人数
			is_group: -1,

			is_app_share_show: false,
			ossPath: ''
		};
	},
	watch: {
		confirmNum(newValue, oldValue) {
			if (newValue > oldValue) {
				this.onScrollRefresh();
			}
		},
		applyNum(newValue, oldValue) {
			if (newValue > oldValue) {
				this.onScrollRefresh();
			}
		}
	},

	onReady() {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
	},
	async onLoad(e) {
		this.ID = e.id;
		this.ossPath = this.$ossPath;
		await this.$api.post('/Common/Add_ViewPath', {
			Path: 'ball_details',
			Platform: uni.getStorageSync('platform')
		});

		if (await this.$store.getters.getLoginState) {
			await this.init();

			uni.$on('join_confirm', () => {
				this.init();
			});
			uni.$on('people_confirm', () => {
				this.init();
			});

			this.groupID = this.ID.toString();
			await this.$im
				.queryGroupMemberList(this.groupID, {
					count: 100,
					nextFlag: 0
				})
				.then((res) => {
					// console.log(res);
					if (res) {
						this.groupList = res.userList;
						if(Array.isArray(this.groupList))
						this.is_group = this.groupList.findIndex((item) => item.userID == this.user.UserID + '09');
					}
				});
		}
	},
	async onShow() {
		await this.init();
	},
	onUnload() {
		uni.$off('join_confirm');
		uni.$off('people_confirm');
	},
	onShareAppMessage(res) {
		//发送给朋友
		var pid = this.user.UserID;

		return {
			title:this.$util.entitiesToUtf16(this.user.Name) + '邀请您加入',
			path: '/pages/ball/ball_details?pid=' + pid + '&id=' + this.resData.ID
		};
	},
	methods: {
		onxhsclose(){
			this.$refs.xhspopu.close();
		},
		idCopy(){
			let _this = this
			uni.setClipboardData({
				data: _this.resData.XHS_ID,
				success: function () {
					_this.$pv.msg('复制成功');
				}
			});
		},
		//简绍伸缩
		onexpand() {
			this.toggle = !this.toggle;
		},
		//起始地图位置
		startMap(){
			uni.openLocation({
				latitude: this.resData.Start_Lat,
				longitude: this.resData.Start_Lng,
				success: function () {
				}
			});
		},
		endMap(){
			uni.openLocation({
				latitude: this.resData.End_Lat,
				longitude: this.resData.End_Lng,
				success: function () {
				}
			});
		},
		openMap(item) {
			console.log(this.resData.Latitude,this.resData.Longitude,'111');
			if (this.resData.Longitude>0 && this.resData.Latitude>0) {
				uni.openLocation({
					latitude: this.resData.Latitude,
					longitude: this.resData.Longitude,
					scale:18,
					success: function () {
						console.log('success');
					},
					fail: function (err) {
						console.error('打开位置失败，错误信息：', err);
					},
				
				});
			}else{
				// this.$pv.msg('地址异常，无法查看');
			}
			
		},
		//同意或拒绝加入组局
		async auditItem(id, uID, appointmentId, status, index) {
			const res = await this.$api.post('Appointment/AuditItem', {
				ID: id,
				AppointmentID: appointmentId,
				Status: status
			});
			if (!res.data) {
				this.$pv.msg(res.message);
				return;
			}
			// if (this.applyList[index]) {
			// 	this.applyList[index].Status = status
			// 	this.applyList = [...this.applyList]
			// }

			uni.$emit('people_confirm', {});

			// 获取用户
			let user_cache = await this.$api.post('/user/GetUserInfo', {
				ID: uID
			});

			const groupID = uni.$prefix + appointmentId.toString();
			const userIDs = uni.$prefix + uID.toString();
			if (status == 1) {
				await this.$im.inviteUsersIntoGroup({ groupID, userIDs });
				const user = uni.getStorageSync('user');
				await this.$im.sendCustomMessage({
					conversationID: groupID,
					subType: 51, //直接加入群聊
					conversationType: 2,
					message: JSON.stringify({
						id: groupID,
						nickName: user_cache.data.Name,
						userID: user_cache.data.UserID,
						operatorNickName: user.Name,
						operatorUserID: user.UserID
					})
				});
			}

			this.$pv.msg('操作成功');
		},
		async onScrollRefresh() {
			let loc = await this.getLocationSysc();
			let res = await this.$api.post('Appointment/Detail', {
				ID: this.ID,
				User_Lng: loc.longitude,
				User_Lat: loc.latitude
			});
			//找到发起人数据
			this.resData = res.data;
			//报名列表
			this.applyList = res.data.Item.filter((v) => v.UserID != this.resData.UserID && v.Status != -1 && v.Status != -2).map((v) => {
				return v;
			});
			this.applyNum = this.applyList.length;
			//已确认列表
			this.confirmList = res.data.Item.filter((v) => v.Status == 1 && v.UserID != this.resData.UserID).map((v) => {
				return v;
			});
			this.confirmNum = this.confirmList.length;
		},
		getVipCss(userInfo) {
			if (userInfo.UserType == '年卡会员' || userInfo.UserType == '黑金年卡会员') return 'blackVip';
			if (userInfo.UserType == '金卡会员' || userInfo.UserType == '体验会员') return 'goldVip';
			return '';
		},
		app_share() {
			this.$refs.share.open();
		},
		openFriend() {
			this.$refs.friends.open();
		},
		async add_user() {
			this.nav_to('/pages/ball/ball_invite_people?id=' + this.resData.ID);
		},
		async reduce_user() {
			this.nav_to('/pages/ball/ball_reduce_people?id=' + this.resData.ID);
		},
		async toGroup() {
			const name = '【' + this.resData.Title + '】群聊';
			this.nav_to(`/pages/chat/group_game?id=${this.groupID}&type=2&name=${name}`);
		},
		async agree_invite() {
			const groupID = this.ID.toString();
			let _this = this;
			// const
			uni.showModal({
				title: '温馨提示',
				content: '确定加入该预约吗？',
				confirmText: '确定加入',
				success: function (rs) {
					if (rs.confirm) {
						let d = _this.$api.post('Appointment/InviteComfirm', {
							AppointmentID: _this.ID,
							Status: 1
						});

						_this.$im.joinGroup(groupID).then((res) => {
							let textMsg = '我是' + _this.user.Name;
							_this.$im.sendChatMessage(2, textMsg, groupID, _this.isByte).then((d) => {});
						});
						_this.$pv.msg('您成功加入');

						_this.init();
					} else if (rs.cancel) {
					}
				}
			});
		},
		async reject_invite() {
			let _this = this;
			uni.showModal({
				title: '温馨提示',
				content: '确定拒绝加入该预约吗？',
				confirmText: '确定拒绝',
				success: function (rs) {
					if (rs.confirm) {
						let d = _this.$api.post('Appointment/InviteComfirm', {
							AppointmentID: _this.ID,
							Status: -1
						});

						_this.$pv.msg('您已拒绝加入');

						_this.init();
					} else if (rs.cancel) {
					}
				}
			});
		},
		async user_sign() {
			let d = await this.$api.post('Appointment/UserSign', {
				AppointmentID: this.ID,
				User_Lat: this.latitude,
				User_Lng: this.longitude
			});

			if (!d.data) {
				this.$pv.msg(d.message);
				return;
			}

			this.$pv.msg('签到成功');

			this.init();
		},
		edit() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['编辑预约', '开始滑雪', '发放奖励', '结束滑雪', '取消滑雪'],
				success: function (res) {
					if (res.tapIndex == 0) {
						if (_this.resData.Status > 0) {
							_this.$pv.msg('预约已开始或已结束，不能编辑');
							return;
						}

						_this.nav_to('/pages/ball/ball_edit?id=' + _this.resData.ID+'&PlaceType='+_this.resData.PlaceType);
					} else if (res.tapIndex == 1) {
						//开始球局
						if (_this.resData.Status == 1) {
							_this.$pv.msg('预约已经开始了');
							return;
						}
						uni.showModal({
							title: '温馨提示',
							content: '你确定要开始吗？',
							confirmText: '确定开始',
							success: function (rs) {
								if (rs.confirm) {
									let d = _this.$api
										.post('Appointment/StartAppointment', {
											ID: _this.resData.ID
										})
										.then((res) => {
											if (res.code == 0 && res.message == 'success') {
												_this.resData.Status = 1;
											}
										});
								} else if (rs.cancel) {
								}
							}
						});
						return;
					} else if (res.tapIndex == 2) {
						//发放奖励
						if (_this.resData.Status == 0) {
							_this.$pv.msg('预约未开始，不能发放奖励');
							return;
						}
						if (_this.resData.Commission <= 0) {
							_this.$pv.msg('该预约未设置奖励，不需要发放');
							return;
						}

						_this.nav_to('/pages/ball/sendreward_user?id=' + _this.ID);
					} else if (res.tapIndex == 3) {
						//结束球局
						const groupID = _this.resData.ID.toString();
						uni.showModal({
							title: '温馨提示',
							content: '确定要结束该预约吗？',
							confirmText: '确定结束',
							success: function (rs) {
								if (rs.confirm) {
									let d = _this.$api
										.post('Appointment/FinishAppointment', {
											ID: _this.resData.ID
										})
										.then((res) => {
											if (res.code == 0 && res.message == 'success') {
												_this.$pv.msg('已结束');
												setTimeout(() => {
													uni.navigateBack();
												}, 1200);
											}
										});
									// 解散球局群聊
									// _this.$im.dismissGroup(groupID)
								} else if (rs.cancel) {
								}
							}
						});
					} else if (res.tapIndex == 4) {
						//取消球局

						if (_this.resData.Status > 0) {
							_this.$pv.msg('预约已开始或已结束，不能取消');
							return;
						}

						uni.showModal({
							title: '温馨提示',
							content: '确定要取消吗？',
							confirmText: '确定取消',
							success: function (rs) {
								if (rs.confirm) {
									let d = _this.$api.post('Appointment/Cancel', {
										ID: _this.resData.ID
									});
									uni.setStorageSync('published', true);
									_this.$pv.msg('取消成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 1200);
								} else if (rs.cancel) {
								}
							}
						});
					}
				},
				fail: function (res) {}
			});
		},

		async init() {
			this.user = uni.getStorageSync('user');

			let loc = await this.getLocationSysc();

			this.longitude = loc.longitude;
			this.latitude = loc.latitude;

			let res = await this.$api.post('Appointment/Detail', {
				ID: this.ID,
				User_Lng: loc.longitude,
				User_Lat: loc.latitude
			});
			//找到发起人数据
			this.initUser = res.data.Item.find((v) => v.IsMySelf == 1);
			this.resData = res.data;
			this.userIDList = res.data.Item.map((item) => item.UserID);
			this.is_sign = res.data.Item.some((v) => v.UserID == this.user.UserID);
			this.userList = res.data.Item;

			//判断自己是否被拒绝
			for (let i = 0; i < this.resData.Item.length; i++) {
				if (this.resData.Item[i].Name == this.user.Name) {
					if (this.resData.Item[i].Status == -1) {
						this.ismyrefuse = true;
					}
				}
			}
			//报名列表
			this.applyList = res.data.Item.filter((v) => v.UserID != this.resData.UserID && v.Status != -1 && v.Status != -2).map((v) => {
				return v;
			});
			this.applyNum = this.applyList.length;
			//已确认列表
			this.confirmList = res.data.Item.filter((v) => v.Status == 1 && v.UserID != this.resData.UserID).map((v) => {
				return v;
			});
			this.confirmNum = this.confirmList.length;

			this.my_ball_status = res.data.Item.filter((v) => v.UserID == this.user.UserID).map((v) => {
				return v.Status;
			});


			this.payPrice = this.resData.Price;

			this.load = true;

			let d = await this.$api.post('Appointment/IsInviteUser', {
				AppointmentID: this.ID
			});

			if (d.data == 1) this.IsInvitor = true;
			else this.IsInvitor = false;

			let ud = await this.$api.post('Appointment/IsSign', {
				AppointmentID: this.ID
			});

			if (ud.data) this.IsSign = true;
			else this.IsSign = false;

			let sd = await this.$api.post('Appointment/IsSuccessed', {
				AppointmentID: this.ID
			});

			this.IsSuccessed = sd.data;
			this.Success_Msg = sd.message;
		},
		// 获取定位
		async getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res);
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0
						};
						resolve(defaultLocation);
					}
				});
			});
		},
		switchTab(num) {
			this.currentTab = num;
		},
		async subJoin() {
			// if(this.resData.Status == 1){
			// 	this.$pv.msg('该预约已经开始');
			// 	return 
			// }
			let u = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});

			this.user = u.data;
			if (this.user.IsAuth == 0) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '请先注册账号',
					confirmText: '关闭',
					cancelText: '注册账号',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					}
				});
			}else{
				if(this.resData.XHS_ID){
					this.$refs.xhspopu.open();
				}else{
					this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`)
				}
				
			}
		},
		async lookID(){
			let u = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});
			this.user = u.data;
			if (this.user.IsAuth == 0) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户请先注册账号',
					confirmText: "关闭",
					cancelText: "注册账号",
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					}
				});
				return
			}
			this.$refs.xhspopu.open();
		},

		async join() {
			this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);
		},
		async cancelBall() {
			let _this = this;
			uni.showModal({
				title: '温馨提示',
				content: '您确认要取消吗',
				showCancel: true,
				success: async function (res) {
					if (res.confirm) {
						_this.$pv.load();
						let r = await _this.$api.post('Appointment/Quit', {
							AppointmentID: _this.ID,
							Status: -1
						});
						setTimeout(() => {
							_this.$pv.msg('已取消');

							_this.init();
						}, 500);
					}
				}
			});
			// api/Appointment/UserCancel
		},

		sharePYQ() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: '【雪遇' + this.resData.GolfType + '】' + this.resData.Title,
				summary: this.resData.Remark,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: '【雪遇' + this.resData.GolfType + '】' + this.resData.Title,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/ball/ball_details?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl
				},
				success: (res) => {
					console.log('success:' + 'pages/ball/ball_details?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});

			// this.is_app_share_show = false;
		}
	},
	computed: {
		getTime2() {
			return (l) => {
				let d = new Date(l);
				let timestamp = d.getTime();
				return this.$u.date(timestamp, 'mm-dd');
			};
		},
		getWeek() {
			return (l) => {
				let d = new Date(l);
				// d.getDate();
				// console.log(d.getDay());
				let week = d.getDay();
				let weelStr = week == 0 ? '星期天' : week == 1 ? '星期一' : week == 2 ? '星期二' : week == 3 ? '星期三' : week == 4 ? '星期四' : week == 5 ? '星期五' : '星期六';
				return weelStr;
			};
		}
	}
};
</script>

<style lang="scss">
button::after {
	border: none;
}

page {
	height: 100%;
	// background: #f6f6f6;
}
.xhsbox{
	padding: 32rpx;
	background-color: #fff;
	border-radius: 16rpx;
	width: 496rpx;
	// height: 200rpx;
	.xhsclose{
		width: 360rpx;
		height: 72rpx;
		background: #FC341B;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
		margin-top: 60rpx;
	}
	.xhslogo{
		width: 168rpx;
		height: 150rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.xhstext{
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.xhscent{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		.xhstitle{
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}
		.xhsid{
			font-size: 28rpx;
			color: #333333;
		}
		.xhsbtn{
			font-size: 22rpx;
			color: #fff;
			background-color: skyblue;
			margin-left: 20rpx;
			padding: 10rpx 15rpx;

		}
	}
}
.describe {
	margin-top: 10rpx;
	min-height: 78rpx;
	position: relative;
	margin-bottom: 15rpx;
}

.describetext {
	//width: 83%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
	color: #666666;
}

.describetext2 {
	width: 90%;
	font-size: 28rpx;
	color: #666666;
}
.describetext3 {
	width: 90%;
	font-size: 28rpx;
	// font-weight: bold;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.expand {
	//position: absolute;
	right: 20rpx;
	top: 35rpx;
	height: 40rpx;
	//display: flex;
	align-items: center;
	text-align: center;
}

.retract {
	//position: absolute;
	right: 0rpx;
	bottom: 0rpx;
	//display: flex;
	align-items: center;
	text-align: center;
}

.expandtext {
	font-size: 28rpx;
}

.expandimg {
	width: 20rpx;
	height: 16rpx;
	vertical-align: middle;
}
.subscribe{
	width: 100%;
	display: flex;
	align-items: center;
}
.sharetetx{
	font-size: 24rpx;
	color: #333333;
}
.shareBtn {
	width: 70rpx;
	height: 48rpx;
	margin-right: 24rpx;
	margin-top: -28rpx;
	button {
		display: flex;
		background-color: unset;
		width: 48rpx;
		height: 48rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.showimg{
	width: 682rpx;
	height: 682rpx;
	margin: 24rpx 36rpx 0 32rpx;
}
.top {
	width: 93%;
	height: 136rpx;
	background: #ffffff;
	margin: 20rpx auto;
	display: flex;
	justify-content: space-between;

	.topLeft {
		display: flex;
		align-items: center;
		width: 70%;

		.initiatorHeadImg {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.nameInfo {
			.nameText {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 12rpx;
			}

			.initText {
				font-size: 24rpx;
				font-weight: normal;
				color: #999999;
				.Birthday{
					border-right: 1rpx solid #999999;
					padding-right: 10rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.topRight {
		width: 25%;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.groupChatBtn {
			width: 48rpx;
			height: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.editBtn {
			width: 48rpx;
			height: 48rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.mid {
	width: 93%;
	background: #ffffff;
	margin: 6rpx auto;
	min-height: 332rpx;

	.midHead {
		// display: flex;
		// justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #E4E4E4;
		margin-bottom: 32rpx;
		.midcon{
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
		}
		.midSubTitle {
			font-size: 28rpx;
			color: #666666;
		}
		.midTitle {
			font-size: 32rpx;
			color: #333333;
			width: 100%;
			font-weight: 600;
		}

		.shareBtn {
			width: 48rpx;
			height: 48rpx;

			button {
				display: flex;
				background-color: unset;
				//height:50rpx !important;
				//margin-top: -30rpx;
				// position: absolute;
				width: 100%;
				height: 100%;
				// right: 100rpx;
				// right: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.midContent {
		font-size: 28rpx;
		padding: 0 24rpx 24rpx;

		.dateTime .dateAddr .payinfo {
			font-size: 28rpx;
			color: #999999;
		}
		.rimg{
			width: 32rpx;
			height: 40rpx;
			// margin-left: 290rpx;
		}
		.distancebox{
			background-color: #F6F6F6;
			// height: 168rpx;
			padding: 32rpx 0;
			box-sizing: border-box;
			margin-top: 20rpx;
			.xarrow{
				width: 24rpx;
				height: 24rpx;
				margin-left: 24rpx;
			}
			.startbox{
				display: flex;
				// margin-bottom: 24rpx;
				.biaodian{
					width: 32rpx;
					height: 32rpx;
					margin-left: 24rpx;
				}
				.startadd{
					font-size: 28rpx;
					color: #333333;
					margin-left: 12rpx;
					flex: 1;
				}
				.rarrow{
					width: 32rpx;
					height: 40rpx;
					margin-right: 24rpx;
					display: block;
    				margin-top: 2rpx;
				}
			}
		}
	}
}

.subIcons {
	height: 32rpx;
	width: 32rpx;
	margin-right: 10rpx;
	margin-top: 2rpx;
}

.subText {
	color: #999999;
}
.addrText{
	flex: 1;
	// width: 300rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mgt-10 {
	margin-top: 10rpx;
}

.list {
	width: 93%;
	background-color: #ffffff;
	margin: 20rpx auto;
	height: 694rpx;
	overflow-y: hidden;
	padding: 24rpx 0;

	.tabs {
		display: flex;

		.listTab {
			font-size: 32rpx;
			color: #333333;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.tabChecked {
			position: relative;

			&::before {
				position: absolute;
				left: 50%;
				transform: translate(-50%, -50%);
				bottom: -25rpx;
				display: block;
				content: '';
				width: 80rpx;
				height: 10rpx;
				background: #333333;
				border-radius: 300rem;
			}
		}
	}

	.listData {
		margin-top: 60rpx;

		.listItem {
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto;
			width: 100%;

			.leftSide {
				display: flex;

				.headImg {
					width: 100rpx;
					height: 100rpx;
					margin: 0 30rpx;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.userName {
					.nameText {
						font-size: 35rpx;
						color: #333333;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.vipiconimg {
							width: 120rpx;
							height: 40rpx;
							margin-left: 5rpx;
						}
					}

					.vipType {
						margin-left: 20rpx;
						min-width: 52rpx;
						height: 32rpx;
						border-radius: 2rpx;
						text-align: center;
						font-size: 16rpx;
						line-height: 32rpx;
					}

					.sign {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.blackVip {
						background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
						border: 2rpx solid #d6c6ab;
						color: #fff;
					}

					.goldVip {
						color: #4c310c;
						background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
						border: 2rpx solid #e6ceb5;
					}
				}
			}

			.rightSide {
				width: 30%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				.signup {
					font-size: 24rpx;
					width: 96rpx;
					height: 34rpx;
					text {
						color: #999999;
					}
				}
				.identify {
					background-color: #e3ffe5;
					width: 128rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					text {
						color: #39b240;
						font-size: 24rpx;
					}
				}

				.online {
					color: #999999;
					font-size: 24rpx;
					display: flex;
					justify-content: flex-end;
					padding-right: 20rpx;
					// &::before {
					// 	display: inline-block;
					// 	content: "";
					// 	height: 16rpx;
					// 	width: 16rpx;
					// 	border-radius: 16rpx;
					// 	background: #27BA2C;
					// 	margin-right: 6rpx;
					// }
				}

				.operateGroup {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					margin-right: 20rpx;

					.opreateBtn {
						width: 50rpx;
						align-items: center;
						display: flex;
						padding: 8rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}

.bottom {
	min-height: 132rpx;
	position: sticky;
	bottom: 0;
	background: #ffffff;
	padding: 30rpx;
	// box-shadow: 0 0 4rpx #ccc;
	border-top: 1rpx solid #E4E4E4;
	display: flex;
	align-items: center;
	.fullBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: blod;
		width: 100%;
		height: 92rpx;
		margin: 20rpx auto;
		border-radius: 50rpx;
		margin-right: 15rpx;
	}

	.halfBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: blod;
		width: 45%;
		height: 92rpx;
		border-radius: 50rpx;
	}

	.btnGroup {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}
}
.organize {
	border: 1px solid #333333;
	color: #0d0d0d;
	background-color: #fff;
}
.whiteBtn {
	color: #999999;
	background: #e6e6e6;
	// border: 1px solid #333333;
}

.blackBtn {
	background: #333333;
	color: #ffffff;
}

.x-share {
	background-color: #ffffff;
	width: 750rpx;
	border-radius: 20rpx;
	padding: 40rpx 20rpx 80rpx;
	display: flex;
	box-sizing: border-box;

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 10rpx;
		}

		span {
			color: #2e2e2e;
		}
	}
}

.emptyList {
	width: 200rpx;
	height: 200rpx;
	margin: 50rpx auto;
	text-align: center;
	color: #999999;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>
